<template>
  <div>
    <jxf-titletip :title="title" :hasGoBack="true" :hasRefresh="false"
                  @goBack="$emit('update:isAdd', false)"></jxf-titletip>
    <el-card class="mt20">
      <div slot="header">
        <span>添加分类</span>
      </div>
      <el-form label-position="right" ref="info" :rules="rules" :model="info" label-width="110px">
        <el-form-item label="分类名称:" prop="classifyName">
          <el-input v-model="info.classifyName"></el-input>
        </el-form-item>
        <el-form-item label="上级分类:" prop="id">
          <el-select v-model="info.id" placeholder="全部" filterable clearable>
            <el-option
              v-for="item in classifyList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="info.sort"></el-input>
          <span class="c-gray">（数字越小排序越靠前，重复数字以最新录入为准）</span>
        </el-form-item>
        <el-form-item label="是否启用:" prop="isEnable">
          <el-radio v-model="info.isEnable" :label="1">是</el-radio>
          <el-radio v-model="info.isEnable" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="分类描述:" prop="remark">
          <el-input type="textarea" v-model="info.remark"
                    :autosize="{ minRows: 3, maxRows: 5}"></el-input>
        </el-form-item>
      </el-form>
      <div class="footer text-center">
        <el-button type="primary" @click="onSubmit('info')">提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "AddClassify",
    props: {
      isAdd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        title: "添加分类",
        insertUrl: "",
        classifyList: [],
        infoBack: {
          id: null,
          classifyName: "",
          isEnable: 1,
          sort: "",
          remark: ""
        },
        info: {
          id: null,
          classifyName: "",
          isEnable: 1,
          sort: "",
          remark: ""
        },
        rules: {
          classifyName: [
            {required: true, message: '请输入分类名称', trigger: 'blur'},
            {validator: validate.length15, trigger: 'change'}
          ],
          id: [{required: true, message: '请选择上级分类', trigger: 'blur'}],
          sort: [{validator: validate.pInteger, trigger: 'change'}],
          remark: [{validator: validate.length150, trigger: 'change'}]
        }
      }
    },
    methods: {
      // 获取商品分类
      getProductType(info) {
        this.info.id = info.id
        this.insertUrl = info.type === 2 ? apis.productType.insertSecClassify : apis.productType.insertThiClassify
        ajax.post(apis.product.getProductType, {type: info.type - 1})
          .then(res => {
            if (res.success === true) {
              if (res.data !== [] && res.data !== null) {
                this.classifyList = res.data.map(item => {
                  return {
                    label: item.classifyName,
                    value: item.id
                  }
                })
              } else {
                this.classifyList = []
              }
            }
          })
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.insertClassify()
          }
          else {
            return false;
          }
        });
      },
      // 获取商品分类
      insertClassify() {
        ajax.post(this.insertUrl, this.info)
          .then(res => {
            if (res.success === true) {
              this.info = {...this.infoBack}
              this.$emit("update:isAdd", false)
              this.$emit("getList")
              this.$message({
                message: res.message,
                type: 'success'
              });
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          })
      }
    },
    created() {

    }
  }
</script>

<style lang="scss" scoped>
  .el-form {
    max-width: 460px;
    margin: auto;
  }
</style>
